<template>
  <div class="frame-style-panel">
    <div class="row1">
      <div class="info">基本信息</div>

      <div class="row">
        <InputNumber
          prefix="X: "
          :step="5"
          :value="left"
          @change="(value: number) => updateLeft(value as number)"
          style="flex: 4"
          :min="0"
          :max="times"
          :maxlength="3"
        />
        <div style="flex: 1"></div>
        <InputNumber
          prefix="Y:"
          :step="5"
          :value="top"
          @change="(value: number) => updateTop(value as number)"
          style="flex: 4"
          :min="0"
          :max="timesheights"
          :maxlength="3"
        />
      </div>

      <template v-if="handleElement!.type !== 'line'">
        <div class="row">
          <InputNumber
            prefix="w: "
            :min="0"
            :max="3000"
            :maxlength="4"
            :step="5"
            :disabled="isVerticalText"
            :value="width"
            @change="(value: number) => updateWidth(value as number)"
            style="flex: 4"
          />
          <template
            v-if="['image', 'shape', 'audio'].includes(handleElement!.type)"
          >
            <Tooltip
              :mouseLeaveDelay="0"
              :mouseEnterDelay="0.5"
              title="解除宽高比锁定"
              v-if="fixedRatio"
            >
              <IconLock
                style="flex: 1"
                class="icon-btn"
                @click="updateFixedRatio(false)"
              />
            </Tooltip>
            <Tooltip
              :mouseLeaveDelay="0"
              :mouseEnterDelay="0.5"
              title="宽高比锁定"
              v-else
            >
              <IconUnlock
                style="flex: 1"
                class="icon-btn"
                @click="updateFixedRatio(true)"
              />
            </Tooltip>
          </template>
          <div style="flex: 1" v-else></div>
          <InputNumber
            prefix="   h: "
            :min="0"
            :max="3000"
            :maxlength="3"
            :step="5"
            :value="height"
            @change="(value: number) => updateHeight(value as number)"
            style="flex: 4"
          />
        </div>
      </template>

      <template
        v-if="!['line', 'video', 'audio'].includes(handleElement!.type)"
      >
        <div class="row">
          <div style="flex: 1; width: 56px; font-size: 14px; color: #303233">
            旋转：
          </div>
          <!-- <Slider
        class="slider"
        :min="0"
        :max="1"
        :step="0.1"
        :value="opacity"
      /> -->
          <Slider
            v-model:value="opacity"
            class="slider"
            :min="0"
            :max="180"
            height="200px"
            @change="updateRotate45()"
          />
          <div style="margin-left: 16px; width: 48px">{{ opacity }}%</div>
          <!-- <InputNumber 
          prefix="旋转："
          :min="-180"
          :max="180"
          :step="5"
          :value="rotate" 
          @change="value => updateRotate(value as number)" 
          style="flex: 4;" 
        /> -->
          <!-- <div style="flex: 1;"></div>
        <div class="text-btn" @click="updateRotate45('-')" style="flex: 2.3;"><IconRotate /> -45°</div>
        <div class="text-btn" @click="updateRotate45('+')"  style="flex: 1.5;"><IconRotate :style="{ transform: 'rotateY(180deg)' }" /> +45°</div> -->
        </div>
      </template>
      <!-- 透明度 -->
      <ElementOpacity />
      <Divider />
      <div class="info">图片设置</div>
      <div>
        <el-scrollbar height="600px">
          <div class="scroll-content">
            <div
              v-for="(item, index) in urls"
              :key="index"
              class="image-container"
              @mouseover="showEditImage(index)"
              @mouseout="hideEditImage(index)"
            >
              <img
                style="
                  width: 100%;
                  height: 280px;
                  border: 1px solid #ccc;
                  border-radius: 5px;
                "
                :src="item"
                alt=""
              />
              <div class="img-name">
                {{ item }}
              </div>
              <div class="edit-image-container">
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    text-align: center;
                  "
                >
                  <div
                    style="
                      position: relative;
                      border: 1px solid #babcbf;
                      border-radius: 4px;
                      width: 30px;
                      height: 30px;
                      background-color: #babcbf;
                      text-align: center;
                    "
                  >
                    <img
                      style="
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        cursor: pointer;
                      "
                      :src="require('/src/assets/tihuan.png')"
                      @click="btn(index)"
                      alt=""
                    />

               
                  </div>

                  <div
                    style="
                      position: relative;
                      margin-left: 20px;
                      border: 1px solid #babcbf;
                      border-radius: 4px;
                      width: 30px;
                      height: 30px;
                      background-color: #babcbf;
                    "
                  >
                    <img
                      style="
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        cursor: pointer;
                      "
                      :src="require('/src/assets/sc.png')"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <Popover trigger="click" v-model:visible="show">
          <template #content>
            <imgoss
              @close="show = false"
              @insert-image="toinsertimgs"
            ></imgoss>
          </template>

          >
        </Popover>
        <Popover trigger="click" v-model:visible="showoss">
          <template #content>
            <imgoss
              @close="showoss = false"
              @insert-image="toinsertimg"
            ></imgoss>
          </template>
          <el-button style="width: 100%; height: 100%" type="primary"
            >新增</el-button
          >
        </Popover>
        <!-- <Button @click="updateURL()">确定</Button> -->
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch ,reactive} from "vue";
import { storeToRefs } from "pinia";
import { useMainStore, useSlidesStore } from "@/store";
import imgoss from "../../CanvasTool/imgOss.vue";
import useHistorySnapshot from "@/hooks/useHistorySnapshot";
import ElementOpacity from "../common/ElementOpacity.vue";
const slidesStore = useSlidesStore();
const { handleElementId } = storeToRefs(useMainStore());
const { addHistorySnapshot } = useHistorySnapshot();
const mainStore = useMainStore();
import { SHAPE_PATH_FORMULAS } from "@/configs/shapes";
import useViewportSize from "../../Editor/Canvas/hooks/useViewportSize";
const canvasRef = ref<HTMLElement>();
import {
  Divider,
  Button,
  InputNumber,
  Tooltip,
  Popover,
  Select,
  Radio,
  Input,
  Slider,
  message,
} from "ant-design-vue";
import { round } from "lodash";
const { dragViewport, viewportStyles } = useViewportSize(canvasRef);
const {
  handleElement,
  richTextAttrs,
  availableFonts,
  textFormatPainter,
  canvasScale,
} = storeToRefs(mainStore);
var showoss = ref(false);
var show = ref(false);
const left = ref(0);
const top = ref(0);
const width = ref(0);
const height = ref(0);
const opacity = ref(0);
const rotate = ref(0);
const isEditVisible = ref({}); // 标识每张图片的 "edit" 图片是否可见
const fixedRatio = ref(false);
var time = ref<any>(
  (viewportStyles.value.width + 13) * canvasScale.value + "px"
);
var heights = ref<any>(
  (viewportStyles.value.height + 13) * canvasScale.value + "px"
);
// 设置元素位置
var times = ref(Number(time.value.split(".")[0]));
var timesheights = ref(Number(heights.value.split(".")[0]));
const showEditImage = (index: string | number) => {
  isEditVisible.value[index] = true;
};

const hideEditImage = (index: string | number) => {
  isEditVisible.value[index] = false;
};
// 固定元素的宽高比
const updateFixedRatio = (value: boolean) => {
  const props = { fixedRatio: value };
  slidesStore.updateElement({ id: handleElementId.value, props });
  addHistorySnapshot();
};
// 将元素旋转45度（顺时针或逆时针）
const updateRotate45 = (command: "+" | "-") => {
  let _rotate = Math.floor(rotate.value / 45) * 45;
  if (command === "+") _rotate = _rotate + 45;
  else if (command === "-") _rotate = _rotate - 45;

  if (_rotate < -180) _rotate = -180;
  if (_rotate > 180) _rotate = 180;

  const props = { rotate: opacity.value };
  slidesStore.updateElement({ id: handleElementId.value, props });
  addHistorySnapshot();
};
const isVerticalText = computed(() => {
  return handleElement.value?.type === "text" && handleElement.value.vertical;
});
const updateLeft = (value: number) => {
  const props = { left: value };
  slidesStore.updateElement({ id: handleElementId.value, props });
  addHistorySnapshot();
};
const updateTop = (value: number) => {
  const props = { top: value };
  slidesStore.updateElement({ id: handleElementId.value, props });
  addHistorySnapshot();
};
// 设置元素宽度、高度、旋转角度
// 对形状设置宽高时，需要检查是否需要更新形状路径
const updateShapePathData = (width: number, height: number) => {
  if (
    handleElement.value &&
    handleElement.value.type === "shape" &&
    "pathFormula" in handleElement.value &&
    handleElement.value.pathFormula
  ) {
    const pathFormula = SHAPE_PATH_FORMULAS[handleElement.value.pathFormula];

    let path = "";
    if ("editable" in pathFormula)
      path = pathFormula.formula(width, height, handleElement.value.keypoint!);
    else path = pathFormula.formula(width, height);

    return {
      viewBox: [width, height],
      path,
    };
  }
  return null;
};
const updateWidth = (value: number) => {
  let props = { width: value };
  const shapePathData = updateShapePathData(value, height.value);
  if (shapePathData) props = { ...props, ...shapePathData };

  slidesStore.updateElement({ id: handleElementId.value, props });
  addHistorySnapshot();
};
const updateHeight = (value: number) => {
  let props = { height: value };
  const shapePathData = updateShapePathData(width.value, value);
  if (shapePathData) props = { ...props, ...shapePathData };

  slidesStore.updateElement({ id: handleElementId.value, props });
  addHistorySnapshot();
};
var indexs = reactive()
const toinsertimg = (val: any) => {
  urls.value.push(val);
  showoss.value = false;
  slidesStore.updateElement({
    id: handleElementId.value,
    props: { urls: urls.value },
  });
};
const toinsertimgs = (val:any) => {
  show.value = false;
  // slidesStore.currentSlide.elements.forEach((item: any, index: number) => {
  //   if (indexs === index) {
  //     console.log(item.urls);
  //     item.urls = val; // 直接替换item.urls的值为val
  //   }
  // });
 

  addHistorySnapshot();
}
const btn =(index:any)=>{
  show.value = true
  // console.log('index',index);
  indexs = index
}
watch(
  handleElement,
  () => {
    if (!handleElement.value) return;

    left.value = round(handleElement.value.left, 1);
    top.value = round(handleElement.value.top, 1);

    fixedRatio.value =
      "fixedRatio" in handleElement.value && !!handleElement.value.fixedRatio;

    if (handleElement.value.type !== "line") {
      width.value = round(handleElement.value.width, 1);
      height.value = round(handleElement.value.height, 1);
      rotate.value =
        "rotate" in handleElement.value &&
        handleElement.value.rotate !== undefined
          ? round(handleElement.value.rotate, 1)
          : 0;
    }
  },
  { deep: true, immediate: true }
);
const urls = ref([]);
var obj = slidesStore.currentSlide.elements.find(
  (v) => v.id == handleElementId.value
);

urls.value = obj.urls;

const updateURL = () => {
  if (!handleElementId.value) return;
  slidesStore.updateElement({
    id: handleElementId.value,
    props: { urls: urls.value },
  });
  addHistorySnapshot();
};
</script>
<style scoped lang="scss">
.scroll-content {
  max-height: 600px;
}

.image-container {
  position: relative;
}
.img-name {
  position: absolute;
  left: 10px;
  bottom: 15px;
  color: #ffffffff;
}
.edit-image-container {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.2s;
}

.edit-image-container img {
  margin-right: 10px;
}

.image-container:hover .edit-image-container {
  opacity: 1;
}
.row {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.slider {
  flex: 2;
}
::v-deep .ant-slider:hover .ant-slider-track {
  background-color: #0daeff; /* 设置鼠标悬浮时的颜色 */
}

::v-deep .ant-slider-handle {
  background-color: #0daeff; /* 设置拖动柄的颜色 */
}
::v-deep .ant-slider-handle.ant-tooltip-open {
  border-color: #0daeff; /* 设置拖动柄的颜色 */
}
::v-deep .ant-slider-track {
  background-color: #0daeff; /* 设置拖动时的颜色 */
}
.info {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  /* identical to box height, or 157% */

  /* 文字色-次要文字or图标 */

  color: #8a8e92;
  margin-bottom: 20px;
}
</style>
